<template>
	<view>
		<carHeader :title="title">
		</carHeader>
		<view class="head">
			<view>
				<image src="/static/车联网服务-08我的_slices/我的-我的@3x.png"></image>
			</view>
			<text>{{user.name}} {{user.phone}}</text>
		</view>
		<view class="yhq">
			<image src="/static/车联网服务-08我的_slices/彩色-优惠券@3x.png"></image>
			<text class="t1">我的优惠券</text>
			<text class="t2">{{user.number}}</text>
		</view>
		<view class="dd">
			<view class="wd">
				我的订单
				<text>
					全部订单
				</text>
			</view>
			<view class="dai">
				<view style="background-image:url('/static/车联网服务-08我的_slices/组 9(0).png');">
					待支付
				</view>
				<view style="background-image:url('/static/车联网服务-08我的_slices/组 9(1).png');">
					待使用
				</view>
				<view style="background-image:url('/static/车联网服务-08我的_slices/组 9(2).png');">
					待评价
				</view>
			</view>
		</view>
		<view class="fw">
			<view class="wd">
				我的服务
			</view>
			<ul>
				<li>
					<image src="/static/车联网服务-08我的_slices/组 9@3x(3).png"></image>
					<text>领券中心</text>
				</li>
				<li>
					<image src="/static/车联网服务-08我的_slices/组 9@3x(4).png"></image>
					<text>邀请好友</text>
				</li>
				<li>
					<image src="/static/车联网服务-08我的_slices/组 9@3x(5).png"></image>
					<text>我的车辆</text>
				</li>
				<li>
					<image src="/static/车联网服务-08我的_slices/组 9@3x(6).png"></image>
					<text>消费记录</text>
				</li>
				<li>
					<image src="/static/车联网服务-08我的_slices/组 9@3x(7).png"></image>
					<text>我的维修</text>
				</li>
				<li>
					<image src="/static/车联网服务-08我的_slices/组 9@3x(8).png"></image>
					<text>意见反馈</text>
				</li>
				<li>
					<image src="/static/车联网服务-08我的_slices/组 9@3x(9).png"></image>
					<text>收获地址</text>
				</li>
				<view class="clearfix"></view>
			</ul>
		</view>
		<view class="tcdl">
			退出登录
		</view>
		<view class="kb">
		</view>
		<view class="tabbar">
			<view class="tabbar1">
				<image src="/static/车联网服务-08我的_slices/首页@3x.png"></image>
				<text>首页</text>
			</view>
			<view class="tabbar2">
				<image src="/static/车联网服务-08我的_slices/我的-我的@3x.png"></image>
				<text>我的</text>
			</view>
			<view class="js">
				<image src="/static/车联网服务-08我的_slices/示警@3x.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '个人中心',
				user: {
					img: "",
					name: "高启平",
					phone: "12345678912",
					number: "3"
				}
			};
		}
	}
</script>

<style lang="scss">
	* {
		box-sizing: border-box;
	}

	.carHeader {
		background-size: cover;
		padding-top: 20rpx;
	}

	.head {
		width: 100%;
		height: 200rpx;
		margin-top: -230rpx;
		text-align: center;

		view {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin: 0 auto 20rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.yhq {
		position: relative;
		width: 90%;
		background-color: white;
		margin: 0% 5%;
		padding: 30rpx 0;
		border-radius: 50rpx;

		image {
			position: absolute;
			left: 20rpx;
			width: 40rpx;
			height: 40rpx;
		}

		.t1 {
			font-size: 30rpx;
			margin-left: 10%;
		}

		.t2 {
			position: absolute;
			right: 5%;
			font-size: 30rpx;
		}

		.t2::after {
			content: '张 >';
		}

	}

	.dd {
		position: relative;
		width: 90%;
		background-color: white;
		margin: 20rpx 5% 0 5%;
		border-radius: 50rpx;

		.wd {
			width: 90%;
			margin: 0 5%;
			padding: 10rpx 0;
			border-bottom: 10rpx solid #F7F7F7;

			text {
				position: absolute;
				top: 20rpx;
				right: 5%;
				color: #808080;
				font-size: 20rpx;
			}

			text::after {
				content: '>';
			}
		}

		.dai {
			width: 100%;
			display: flex;
			justify-content: space-around;

			view {
				width: 200rpx;
				height: 100rpx;
				margin: 40rpx 0;
				border-radius: 10rpx;
				text-align: center;
				line-height: 100rpx;
				color: white;
			}
		}
	}

	.fw {
		width: 90%;
		background-color: white;
		margin: 20rpx 5% 0 5%;
		border-radius: 50rpx;

		.wd {
			width: 90%;
			margin: 0 5%;
			padding: 10rpx 0;
			border-bottom: 10rpx solid #F7F7F7;
		}

		ul {
			width: 90%;
			margin: 0 5%;
			padding: 20rpx;
			.clearfix::after {
				content: '';
				display: block;
				clear: both;
				height: 0;
				visibility: hidden;
			}
			li {
				list-style: none;
				float: left;
				height: 130rpx;
				width: 23%;
				margin: 15rpx 1%;

				image {
					width: 120rpx;
					height: 80rpx;
				}

				text {
					font-size: 30rpx
				}
			}
		}

	}

	.tcdl {
		width: 80%;
		height: 80rpx;
		background-color: #D9D9D9;
		margin: 20rpx 10% 0 10%;
		border-radius: 50rpx;
		text-align: center;
		line-height: 80rpx;
		color: white;
		font-size: 24rpx
	}
	
	.kb{
		width: 100%;
		height: 400rpx;
	}
	
	.tabbar{
		width: 100%;
		height: 120rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		
		view{
			position: fixed;
			bottom: 0;
			width: 50%;
		}
		image{
			position: fixed;
			bottom: 50rpx;
			left: 20%;
			width: 60rpx;
			height: 60rpx;
		}
		text{
			position: fixed;
			bottom: 10rpx;
			left: 20%;
		}
		.tabbar2{
			margin-left: 50%;
			image{
				left: 70%;
			}
			text{
				left: 71%;
			}
		}
		.js{
			position: fixed;
			bottom: 40rpx;
			left: 44%;
			width: 100rpx;
			height: 100rpx;
			background-color: orange;
			border-radius: 50%;
			image{
				position: fixed;
				bottom: 70rpx;
				left: 357rpx;
				width: 50rpx;
				height: 50rpx;
			}
		}
		
	}
</style>